import BaseVue from '@/lib/base/BaseVue';
import Component from 'vue-class-component';
import ScrollUtils from '@/lib/utils/ScrollUtils';
import { Prop } from 'vue-property-decorator';

@Component
export default class extends BaseVue {
    // 偏移量
    @Prop({
        default: 0
    })
    private offset!: number;

    // 过度模式
    @Prop({
        default: 'fade'
    })
    private mode!: 'fade' | 'block';
    // 可滚动高度
    @Prop({
        default: 0
    })
    private scrollHeight!: number;

    // 最后滚动条位置
    private lastScrollTop = 0;

    private get style() {
        if (this.mode === 'block') {
            const offset = this.offset || 999999999999999;
            return {
                opacity: this.lastScrollTop < offset ? 0 : 1,
                visibility: this.lastScrollTop < offset ? 'hidden' : 'visible'
            }
        }
        let opacity = (this.lastScrollTop - this.offset) / this.scrollHeight;
        if (opacity > 1) {
            opacity = 1;
        }
        return {
            opacity,
            visibility: opacity > 0 ? 'visible' : 'hidden'
        };
    }

    public render() {
        return (
            <div ref="dom" style={this.style}>
                {this.$slots.default}
            </div>
        )
    }

    public mounted() {
        this.$nextTick(() => {
            ScrollUtils.on(({ scrollTop }) => {
                this.init(scrollTop);
            });
        });
    }

    public init(scrollTop: number) {
        this.lastScrollTop = scrollTop;
        this.$nextTick(() => {
            this.$emit('scroll', this.style.opacity / 100);
        });
    }
}
